<!DOCTYPE html>
<style>
  div {
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }

  .container {
    position: relative;
    perspective: 1px;
    perspective-origin: top right;
    overflow: scroll;
  }
  .box {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    transform-origin: top right;
    transform:
      matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, -1
      )
      translateZ(-2px);

    width: 20px;
  }
  .spacer {
    display: block;
    height: 1300px;
  }
</style>
<div class="container">
  <div class="box"></div>
  <span class="spacer"></span>
</div>
<script>
  const scroller = document.querySelector('.container');
  const thumb = document.querySelector('.box');
  const scrollerHeight = scroller.getBoundingClientRect().height;
  thumb.style.height = scrollerHeight * scrollerHeight / scroller.scrollHeight + 'px';
  thumb.style.right = (scroller.clientWidth - scroller.getBoundingClientRect().width) + 'px';
</script>
